<template>
	<view class="y">
	<view class="x">
		<view class="w">
			<view style="padding: 6px 16px; background-color:#ff5500; margin-top:5px;">
				<label class="x" style="background-color: #f8f8f8; border-radius: 40px; height: 30px; align-items: center;">
				<image src="../../static/搜索.png" style="width: 20px; height: 16px; margin-left: 16px;"></image>
				<input type="text" placeholder="请输入商品" style="margin-left: 16px;"/>
				</label>
			</view>
			</view>
	</view>
	<view class="x">
		<view class="y">
			<!-- <scrol1-view class="zuo" v-for="(item,index) in user" :key="index">
				<view :class="{'er':isAcctive===index}" @click="shu(item.id,index)">{{index.name}}</view>
			</scrol1-view> -->
			<label class="zuo" @click="shu">当季热卖</label>
			<label class="zuo" @click="shu">切果/果饼</label>
			<label class="zuo" @click="shu">苹果香蕉</label>
			<label class="zuo" @click="shu">西瓜蜜瓜</label>
			<label class="zuo" @click="shu">桃李梅枣</label>
			<label class="zuo" @click="shu">柑橘橙柚</label>
			<label class="zuo" @click="shu">葡提浆果</label>
			<label class="zuo" @click="shu">热带水果</label>
			<label class="zuo" @click="shu">榴莲专区</label>
		</view>

		<view class="y">
			<view class="x">
				<label class="title" style="border-bottom: 4px solid #ff557f; margin-left: 2px;">全部</label>
				<label class="title" @click="dian">短袖</label>
				<label class="title" @click="dian">长袖</label>
				<label class="title" @click="dian">裤子</label>
				<img src="/static/箭头.png" class="img">
			</view>

			<!-- 红包图片模块 -->
			<img src="/static/hongbao.png" class="hongbao">
			<label class="quanbu"> 全部</label>

			<!-- 内容模块 -->
			<view class="e">
				<view class="x">
					<image src="/static/1.jpg" class="qiu" @click="dianji"></image>
					<view style="display: flex; justify-content: flex-end;">
						<!-- 水平位置 -->
						<view class="y">
							<!-- 竖 -->
							<view class="a1" @click="dianji">上衣</view>
							<view class="ce" @click="dianji">测试1</view>
							<view class="x">
								<!-- 横 -->
								<view class="xian" @click="dianji">￥15</view>
								<view class="yuan" @click="dianji">￥20</view>
								<image src="../../static/减少 .png" class="jianshao" @click="bbb"></image>
								<p class="shuliang">{{hh}}</p>
								<img src="/static/jia.png" class="jia" @click="aaa">
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="e">
				<view class="x">
					<image src="/static/1.jpg" class="qiu" @click="dianji"></image>
					<view style="display: flex; justify-content: flex-end;">
						<!-- 水平位置 -->
						<view class="y">
							<!-- 竖 -->
							<view class="a1" @click="dianji" >秋衣</view>
							<view class="ce" @click="dianji">测试1</view>
							<view class="x">
								<!-- 横 -->
								<view class="xian" @click="dianji">￥10</view>
								<view class="yuan" @click="dianji">￥30</view>
								<image src="../../static/减少 .png" class="jianshao" @click="bbb"></image>
								<p class="shuliang">{{hh}}</p>
								<img src="/static/jia.png" class="jia"  @click="aaa"/>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="e">
				<view class="x">
					<image src="/static/1.jpg" class="qiu" @click="dianji"></image>
					<view style="display: flex; justify-content: flex-end;">
						<!-- 水平位置 -->
						<view class="y" >
							<!-- 竖 -->
							<view class="a1" @click="dianji">短袖</view>
							<view class="ce" @click="dianji">测试1</view>
							<view class="x">
								<!-- 横 -->
								<view class="xian" @click="dianji">￥22</view>
								<view class="yuan" @click="dianji">￥77</view>
								<image src="../../static/减少 .png" class="jianshao" @click="bbb"></image>
								<p class="shuliang">{{hh}}</p>
								<img src="/static/jia.png" class="jia"  @click="aaa"/>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="e">
				<view class="x">
					<image src="/static/1.jpg" class="qiu" @click="dianji"></image>
					<view style="display: flex; justify-content: flex-end;">
						<!-- 水平位置 -->
						<view class="y"  >
							<!-- 竖 -->
							<view class="a1" @click="dianji">秋衣大号</view>
							<view class="ce" @click="dianji">测试1</view>
							<view class="x">
								<!-- 横 -->
								<view class="xian" @click="dianji">￥15</view>
								<view class="yuan" @click="dianji">￥99</view>
								<image src="../../static/减少 .png" class="jianshao" @click="bbb"></image>
								<p class="shuliang">{{hh}}</p>
								<img src="/static/jia.png" class="jia"  @click="aaa"/>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
// 功能区
export default {
		data() {
			return{
				hh:0,
				//user:[],//左边数据
				//yous:[],//左上数据
				//youx:[]//商品数据
			}
	},
	methods: {
		// shu(id,index){
		// 	this.isActive = index
		// 	uni.request({
		// 	url:"http://47.91.230.137:8086/wx/catalog/current?id=" + id,
		// 	success:(res)=>{
		// 	// this.yous =res.data.data.currentCategory
		// 	this.youx = res.data.data.currentsubCategory
		// 	},
		// 	})
		// },
		shu(){
			this.shu=!this.shus
			
		},
		aaa(){
       this.hh=this.hh+1
		},
		bbb(){
			if (this.hh<=0){
				uni.showToast({
					title:'宝贝不能再少了！！！！'
				})
				// alert('宝贝不能再少了！！！！')
			this.hh=0
		}else{
			this.hh=this.hh-1
		}
		},
		dianji(){
			uni.navigateTo({
				url:'../xiangqing/xiangqing'
			})
		}
	}
	}
</script>

<style>
	/* css样式 */
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}
	
	/* 搜索栏 */
.w{
	width: 440px;
	height: 50px;
	background-color: #ff5500;
}
.shuliang{
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}

	.zuo {
		width: 60px;
		padding: 16px;
		/* 内边距 */
		margin-left: 3px;
		/* 外左边距 */
		font-size: 13px;
	}
	.er{
		width: 60px;
		padding: 16px;
		/* 内边距 */
		margin-left: 3px;
		/* 外左边距 */
		font-size: 13px;
		color: #ffaa7f;
		background-color: #ff5500;
	}

	/* 第一行字体 */
	.title {
		/* margin-left: 5px; */
		padding: 5px;
		/* 内边距 */
		margin-top: 3px;
		/* 上 */
		font-size: 13px;
	}

	/* 向下箭头小图标 */
	.img {
		height: 8px;
		width: 8px;
		/* 宽 */
		margin-left: 60px;
		margin-top: 20px;
	}

	/* 红包图片 */
	.hongbao {
		width: 210px;
		height: 60px;
		border-radius: 5%;
		/* 设置图片圆角 */
		margin-top: 5px;
		/* 上 */
		margin-left: 7px;
		/* 左 */
		/* 外边距 */

	}

	/* 模块 */
	.quanbu {
		font-size: 13px;
		padding: 15px;
		/* 内边距 */
	}

	/* 商品图片 */
	.qiu {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		/* 设置圆角 */
		margin-left: 20rpx;
		/* 外左 */
		margin-bottom: 20rpx;
	}

	/* 添加商品的绿色小图标 */
	.jia {
		display: flex;
		flex-direction: row;
		width: 40rpx;
		height: 40rpx;
		padding: 20rpx;
		/* 内边距 */
		margin-left: 20rpx;
		/* 外左边距 */
	}
	.jianshao{
		display: flex;
		flex-direction: row;
		width: 50rpx;
		height: 50rpx;
		padding: 20rpx;
		/* 内边距 */
		margin-left: 20rpx;
		/* 外左边距 */
	}

	/* 商品名称字体设置 */
	.a1 {
		font-size: 30rpx;
		margin-left: 30rpx;
		/* 左边距 */
		color: #000000;
		/* 字体颜色 */
	}

	/* 测试行字体 */
	.ce {
		margin-left: 30rpx;
		/* 左边距 */
		color: #666;
		/* 字体颜色 */
		font-size: 20rpx;
		/* 字体大小 */
		margin-top: 19rpx;
		/* 上边距 */
	}

	/* 现价字体 */
	.xian {
		font-size: 30rpx;
		margin-left: 30rpx;
		/* 左边距 */
		margin-top: 30rpx;
		/* 上边距 */
		color: #000000;
		/* 字体颜色 */
	}

	/* 原价字体 */
	.yuan {
		margin-left: 13px;
		/* 左边距 */
		font-size: 20rpx;
		/* 字体大小 */
		color: #666;
		/* 字体颜色 */
		text-decoration: line-through;
		/* 添加删除线 */
		margin-top: 35rpx;
		/* 上边距 */
	}

	/* 第一个内容模块 */
	.e {
		margin-left: 5px;
		/* 左边距 */
		border-style: none none solid none;
		/* 下边框 */
		color: #a9a5a6;
		border-width: 1px;
		/* 边框粗细 */
		margin-top: 5px;
		/* 上边距 */
	}
</style>
